<template>
    <div class="page">
        <div class="count grid" v-for="(item, index) in gridData" :key="index">
            <div class="main">
                <div class="dataBox">
                    <div class="title">
                        {{ item.name }}
                    </div>
                    <div class="data" :title="dataStr(data[item.field])+item.unit" v-gradientTitle>
                        {{ dataStr(data[item.field]) }}{{ item.unit }}
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {ref, computed } from "vue";
import jdzsj from "@assets/dwgk/jdIcon.png"
import zczjz from "@assets/dwgk/areaCount.png"
import xfwhcs from "@assets/dwgk/zcIcon.png"
import xmsl from "@assets/dwgk/zcIcon.png"
export default {
    name: "baseMesBureau",
    props:{
        data:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    setup(props, content){

        let gridData = ref([
            {
                name: '基地总数量',
                count: 0,
                unit: '个',
                icon: jdzsj,
                field: 'baseNumberCount'
            },
            {
                name: '占地总面积',
                count: 0,
                unit: 'm²',
                icon: zczjz,
                field: 'baseAreaCount'
            },
            {
                name: '入账总价值',
                count: 0,
                unit: '万',
                icon: xmsl,
                field: 'baseLandEvaluateCount'
            },
            {
                name: '评估总价值',
                count: 0,
                unit: '万',
                icon: xfwhcs,
                field: 'baseLandCostCount'
            }
        ])

        let dataStr = computed(() => {
            return data => {
                if(data != 0 && data == void 0){
                    return "--"
                }else{
                    return data.toString().split(".")[0]
                }
            }
        })

        return {
            dataStr,
            gridData
        }
    }
}
</script>

<style scoped lang="less">
.page{
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  .grid{
    width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    .main{
      width: 100%;
      height: 100%;
      background: url("/src/assets/itemBcg.png") center center no-repeat;
      background-size: auto 100%;


        .dataBox{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            transform: translateY(-10px);
            .title, .data{
                color: #fff;
                text-align: center;
            }
            .data{
                width: 100%;
                font-size: 26px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .title{
                font-size: 20px;
                font-weight: 100;
                font-family: YouSheBiaoTiHei;

            }
        }

    }
  }
}
</style>
